<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>五灵霸武DKP拍卖系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/webjars/jquery-ui/1.12.1/jquery-ui.min.css">
    <link href="webjars/layui/2.5.5/css/modules/layer/default/layer.css" rel="stylesheet">
    <link rel="stylesheet" href="/asset/css/login.css">
    <!-- 引入组件库 -->
    <script type="application/javascript" src="webjars/vue/2.6.11/vue.js "></script>
    <script type="application/javascript" src="webjars/jquery/3.4.1/jquery.js "></script>
    <script type="application/javascript" src="webjars/jquery-ui/1.12.1/jquery-ui.min.js"></script>
    <script type="application/javascript" src="webjars/layui/2.5.5/lay/modules/layer.js "></script>
</head>
<body>
<div id="contianer">
    <div id="username_input">
        <label for="username">角色名称</label>
        <input id="username" name="username" class="input_box" type="text" placeholder="请输入角色名称">
    </div>
    <div id="group_select">
        <label for="select">团队</label>
        <select name="select" class="select_box" v-model="team">
            <option v-for="team in teams">{{team.name}}</option>
        </select>
        <button v-on:click="teamlist" type="button">检查</button>
    </div>
    <div id="join_and_add_btn">
        <button v-on:click="addteam" type="button">创建</button>
        <button v-on:click="jointeam" type="button">加入</button>
    </div>
</div>
<script src="/asset/js/helper.js"></script>
<script>
    var dkp = new Vue({
        el: '#contianer',
        data: {
            name: '',
            admin: false,
            team: '',
            teams: [{"name": "请选择"}],
            users: [],
            msg: ''
        },
        methods: {
            querySearch(queryString, cb) {
                var users = this.users;
                var results = queryString ? users.filter(this.createFilter(queryString)) : users;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
                };
            },
            teamlist: function (event) {
                var _self = this;
                $.ajax({
                    url: '/teamlist',
                    type: "GET",
                    success: function (resp) {
                        if (resp.length < 3) {
                            layer.msg('暂无队伍');
                        } else {
                            _self.teams = eval("(" + resp + ")");
                        }
                    }
                })
            },
            userlist: function (event) {
                var _self = this;
                $.ajax({
                    url: '/userlist',
                    type: "GET",
                    success: function (resp) {
                        _self.users = eval("(" + resp + ")");
                        $(function () {
                            $("#username").autocomplete({
                                source: dkp.users
                            });
                        });
                    }
                })
            },
            addteam: function (event) {
                var _self = this;
                _self.name = $("#username").val();
                if (_self.name) {
                    var html = '<div>' +
                        '<div class="input-group">' +
                        '<span class="input-group-addon">团队</span>' +
                        '<input id="teamName" type="text" placeholder="请输入团队名称">' +
                        '</div>' +
                        '</div>';
                    layer.open({
                        area: ['250px', '150px'],
                        title: false,
                        closeBtn: 1,
                        type: 1,
                        content: html,
                        btn: ['确定'],
                        yes: function (index, layero) {
                            const teamName = $('#teamName').val();
                            $.ajax({
                                url: '/addteam',
                                data: {
                                    name: teamName
                                },
                                type: "POST",
                                success: function (resp) {
                                    layer.msg('创建成功');
                                    _self.admin = true;
                                    sessionStorage.setItem("admin", _self.admin);
                                    _self.teams = eval("(" + resp + ")");
                                }
                            });
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                        }
                    });
                } else {
                    layer.msg('请先输入角色名');
                }
            },
            jointeam: function () {
                this.name = $("#username").val();
                // this.team = "五灵霸武";
                if (this.name) {
                    if (this.team) {
                        sessionStorage.setItem("name", this.name);
                        sessionStorage.setItem("team", this.team);
                        window.location.href = '/auction'
                    } else {
                        layer.msg("请先选择团队")
                    }
                } else {
                    layer.msg("请先输入角色名")
                }
            }
        }
    });
    dkp.teamlist();
    dkp.userlist();

</script>
</body>
</html>
